<template>
  <el-container class="home-container">
    <el-header>
      <el-menu
        router
        class="el-menu"
        mode="horizontal"
        background-color="#2b88d8"
        text-color="#fff"
        active-text-color="#ffd04b">
        <el-image :src="require('@/assets/logo.png')"
                  style="width: 250px;height: 50px"/>
        <template v-for="(item,index) in nav_menu_data">
          <el-menu-item :index="item.path" :key="index">
            <span class="nav_tex"> {{ item.title }}</span>
          </el-menu-item>
        </template>
        <UserMessage></UserMessage>
      </el-menu>
    </el-header>
    <el-main>
      <!-- 如果有了token 获得用户信息 隐藏注册按钮-->
      <router-view class="router"></router-view>
      <br/>
      <br/>
      <br/>
      <br/>
      <Foot></Foot>
    </el-main>

  </el-container>
</template>

<script>
import UserMessage from "./UserMessage";
import Foot from "./Foot";
import Particles from "./Particles";

export default {
  name: "Home",
  components: {
    UserMessage,
    Foot,
    Particles,

  },
  data() {
    return {
      nav_menu_data: [
        {
          title: '首页查询',
          path: '/index'
        },
        {
          title: '航班中心',
          path: '/PlaneList'
        },
        {
          title: '历史订单',
          path: '/OrderList'
        },
        {
          title: '我的行程',
          path: '/MyOrder'
        },
      ],
    }
  },

  watch: {

    //路由跳转
    $route(to, from) {
      var myactive = to.path == "/login" || to.path == "/register"
      var route = to.path == "/OrderList" || to.path == "/index" || to.path == "/myOrder" || to.path == "/PlaneList"
      if (myactive) {
        this.active = "#fff"
      }
      if (route) {
        this.active = '#d93d40'
      }
    }
  },

}
</script>

<style scoped>
.home-container {
  height: 100%;
}
.el-menu {
  /*不发生换行*/
  flex-wrap: nowrap;
  /*将对象作为内联块级弹性伸缩盒显示*/
  display: flex;
  /*子元素在主轴上的对齐方式 两端对齐，子元素之间的间隔相等*/
  justify-content: space-between;
}

.nav_tex {
  font-size: 20px;
  font-weight: bold;
}



</style>
